import React, {useRef} from 'react';
// 引入组件
import Chat, {Bubble, useMessages, Typing, Think} from '@chatui/core';
import chatService from '../services/chatService'
// 引入样式
import '@chatui/core/dist/index.css';

const initialMessages = [
    {
        type: 'system',
        content: { text: '专属智能客服为您服务' },
    },
    {
        type: 'text',
        content: { text: 'Hi，我是你的专属智能助理，有问题请随时找我哦~' },
        user: {
            avatar: 'https://gw.alicdn.com/imgextra/i2/O1CN01fPEB9P1ylYWgaDuVR_!!6000000006619-0-tps-132-132.jpg',
        },
    },
];

const ChatAgent = () => {

    const { messages, appendMsg, updateMsg } = useMessages(initialMessages);

    const streamingMessageIdRef = useRef(null);


    function handleSend(type, val) {
        if (type === 'text' && val.trim()) {
            appendMsg({
                type: 'text',
                content: { text: val },
                position: 'right',
            });

            const aiMsgId = `ai-${Date.now()}`;
            appendMsg({
                _id: aiMsgId,
                type: 'typing',
                content: { text: '', isStreaming: false },
                user: { avatar: 'https://gw.alicdn.com/imgextra/i2/O1CN01fPEB9P1ylYWgaDuVR_!!6000000006619-0-tps-132-132.jpg' },
            });
            streamingMessageIdRef.current = aiMsgId;

            // 在这里我们接入我们的LLM服务，完成一个简单的对话功能
            chatService.sendMessageStream(val,onData,onComplete,aiMsgId);
        }
    }

    function onData(accumulatedText, msgType,isDone,aiMsgId) {
        updateMsg(aiMsgId, {
            type: msgType,
            content: {
                thinkText: accumulatedText,
                isStreaming: isDone // 标记正在流式输出
            },
            user: { avatar: 'https://gw.alicdn.com/imgextra/i2/O1CN01fPEB9P1ylYWgaDuVR_!!6000000006619-0-tps-132-132.jpg' },
        });
    }

    function onComplete(accumulatedText,done,aiMsgId,thinkText,thinkingTime) {
        if (accumulatedText) {
            updateMsg(aiMsgId, {
                content: {
                    text: accumulatedText,
                    thinkText: thinkText,
                    thinkingTime: thinkingTime,
                    isStreaming: done // 标记正在流式输出
                },
                user: { avatar: 'https://gw.alicdn.com/imgextra/i2/O1CN01fPEB9P1ylYWgaDuVR_!!6000000006619-0-tps-132-132.jpg' },
            });
        }
    }

    function renderMessageContent(msg) {
        const {  type,content } = msg;

        if (type === 'typing') {
            return (
                <Bubble>
                    <Typing text="输入中" />
                </Bubble>
            );
        }else if (type === 'thinking') {
            return (
                <Bubble>
                    <Think>
                        <p>{content.thinkText}</p>
                    </Think>
                </Bubble>
            );
        }

        return (
            <Bubble>
                {content.thinkText ? (
                        <Think isDone thinkTime={content.thinkingTime}>
                            <p>{content.thinkText}</p>
                        </Think>
                    ):null }
                <p>{content.text}</p>
            </Bubble>
        );
    }

    return (
        <div style={{ height: '85vh' }}>
        <Chat
            navbar={{ title: '智能助手' }}
            messages={messages}
            renderMessageContent={renderMessageContent}
            onSend={handleSend}
        />
        </div>
    );
};

export default ChatAgent
